<template>
    <div v-if="readyShow">
        <div style="text-align: left; width: 100%; margin-bottom: 5%; margin-top: 5%">
            <span class="title">{{name}}</span>
            <el-badge :value="unViewMessage" class="item" style="float: right">
                <el-button size="small" icon="el-icon-message" @click="toMessage">信箱</el-button>
            </el-badge>
        </div>
        <meeting-list :title="meetingListTitle" :url="meetingsUrl" :tableData="meetings"></meeting-list>
        <hr style="height:1.5px;border:none;border-top:1.5px solid #555555;"/>
        <div style="margin-top: 5%"></div>
        <message-list :title="noticeListTitle" :url="announcementUrl" :tableData="announcement"></message-list>
        <hr style="height:1.5px;border:none;border-top:1.5px solid #555555;"/>
        <div style="margin-top: 5%"></div>
        <div style="margin-bottom: 15%"></div>
        <index-bottom></index-bottom>
    </div>
</template>

<script>
    import MessageList from './components/message-list.vue'
    import MeetingList from './components/meeting-list.vue'
    import IndexBottom from './components/index-bottom.vue'
    import util from 'assets/js/util.js'

    export default {
        data() {
            return {
                meetingListTitle: '最新会议',
                noticeListTitle: '最新公告',
                meetingsUrl: 'meeting-list',
                announcementUrl: 'notice',
                unViewMessage: 0,
                name: '未命名',
                meetings: [],
                announcement: [],
                caseId: 0,
                creditorId: 0,
                readyShow: false,
            }
        },
        mounted() {
            const _self = this;
            this.caseId = util.getUrlParam(document.location.href, 'caseId');
            this.creditorId = util.getUrlParam(document.location.href, 'creditorId');

            util.ajax({
                url: '/home',
                params: {caseId: this.caseId, creditorId: this.creditorId},
                success: function (data) {
                    data.data.meetingList.forEach(_meeting => _self.meetings.push({
                        id: _meeting.id,
                        name: _meeting.name,
                        time: util.formatDateDetail(_meeting.startTime) /*+ "   ——   " + util.formatDateDetail(_meeting.endTime)*/
                    }));
                    data.data.noticeList.forEach(_announcement => _self.announcement.push({
                        id: _announcement.id,
                        title: _announcement.title,
                        time: util.formatDate(_announcement.sureTime) || '',
                        type: _announcement.type,
                        typeString: _announcement.typeString,
                    }));

                    _self.name = data.data.name;
                    sessionStorage.setItem('token', data.data.token);
                    _self.unViewMessage = data.data.unViewMessage;
                    _self.readyShow = true;
                },
            });
        },
        methods: {
            toMessage: function (row, column, cell, event) {
                window.location.href = '../message/message-list.html?creditorId='+ this.creditorId;
            },

        },
        components: {
            MessageList,
            MeetingList,
            IndexBottom
        }
    }
</script>

<style>
    .item {
        margin-top: 10px;
        margin-right: 20px;
    }

    .title {
        font-size: x-large;
        color: black;
        margin-left: 3%;
    }
</style>
